<div id="quick-search">
	<!-- <div id="quick-search-left">
		
		<div id="banner-slider">
		    <ul class="slide_fade">
			<li id='slide1' class="active"><img src='/templates/ProgressiveView/main/images/slider1.jpg'  title="Automatically generated caption" /></li>
			<li id="slide2"><img src='/templates/ProgressiveView/main/images/slider2.jpg' title="Automatically generated caption" /></li>
			<li id="slide3"><img src='/templates/ProgressiveView/main/images/slider3.jpg' title="Automatically generated caption" /></li>
		    </ul>
		</div>

		 
		<div class="label"><h1>[[Find a Job]]</h1></div>
		<div class="right-arrow"></div>
		 
	</div> -->
	<!-- <div id="quick-search-right"> -->
		<div style="width: 700px;margin: auto;">
		<h1 style="color: #CE0000; text-align: center;">Discover Companies and Jobs That You'll Love</h1>
		<form action="{$GLOBALS.site_url}/search-results-jobs/" id="quickSearchForm" >
			<input type="hidden" name="action" value="search" />
			<input type="hidden" name="listing_type[equal]" value="Job" />
			<fieldset>
				<div id="inputStat">{module name="classifieds" function="count_listings"}</div>
				<div class="quick-search-input">{search property=keywords}</div><span class="in">in</span>
				<div class="quick-search-input">{search property=Location searchWithin=false fields=$locationFields template="location.like.tpl"}</div>
				<div class="quick-search-btn" style="margin-top: 30px;">
				<div class="find-button-zoom"><input type="submit" id="btnSearch" value="[[Search]]"/></div>
				</div>

				<div id="quickSearchLinks" style='display:none;'>
					<ul>
						<li><a href="#" id="moreOptions">[[More Options]]</a>
							<ul id="moreOprtionsItem">
								<li><a href="{$GLOBALS.site_url}/find-jobs/">&#187; <span>[[Advanced search]]</span></a></li>
								{if $acl->isAllowed('open_search_by_company_form')}
									<li><a href="{$GLOBALS.site_url}/browse-by-company/">&#187; <span>[[Search by Company]]</span></a></li>
								{/if}
							</ul>
						</li>
					</ul>
				</div>

			</fieldset> 
		</form>
	<!-- </div> -->
		</div>
</div>

{literal}
<script type="text/javascript">
	$(function() {
		
		setInterval(function(){
			var currentOne = $('#banner-slider .active');
			if(currentOne.attr('id')=='slide3'){
				currentOne.removeClass('active');
				$('#banner-slider #slide1').addClass('active');	
			}else{
				currentOne.next().addClass('active');
				currentOne.removeClass('active');	
			}			
		}, 3000); 
		


		$("#keywords").val('{/literal}[[Keywords]]{literal}');
		$("#Location").val('{/literal}[[Location]]{literal}');
		$("#State").val('{/literal}[[State]]{literal}');
		
		$("#quickSearchForm").submit(function(){
			if ($("#keywords").val()=='{/literal}[[Keywords]]{literal}')
			{
				$("#keywords").val('');
			}
			if ($("#Location").val()=='{/literal}[[Location]]{literal}')
			{
				$("#Location").val('');
			}
		});

		$("#keywords").focus(function(){
			if ($("#keywords").val()=='{/literal}[[Keywords]]{literal}')
			{
				$("#keywords").val('');
			}
		});

		$("#keywords").blur(function(){
			if ($("#keywords").val()=='')
			{
				$("#keywords").val('{/literal}[[Keywords]]{literal}');
			}
		});


		$("#Location").focus(function(){
			if ($("#Location").val()=='{/literal}[[Location]]{literal}')
			{
				$("#Location").val('');
			}
		});

		$("#Location").blur(function(){
			if ($("#Location").val()=='')
			{
				$("#Location").val('{/literal}[[Location]]{literal}');
			}
		});
	});
</script>
{/literal}